<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<br>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas")
			var cxt = canvas.getContext('2d')
			var rectwidth = 100
			var rectheight = 50
			var degree=0;
			var settime = window.setInterval(setTimeFun, 100);
			
			function setTimeFun() {
				cxt.clearRect(0, 0, canvas.width, canvas.height)
				cxt.save();
				cxt.translate(canvas.width/2, canvas.height/2)
				cxt.rotate(degree*Math.PI/20)
				cxt.fillStyle="palegreen"
				cxt.fillRect(-rectwidth/2,-rectheight/2,rectwidth,rectheight)
				cxt.restore()
				degree++
			}
		</script>
	</body>
</html>
